<template>
  <el-dialog width="630px" :visible="showDetaildialog" title="订单详情" @close="btnCancel">
    <div class="order-status">
      <img v-if="detailList.status === 2" src="@/assets/common/success.png" alt="" class="icon">
      <img v-if="detailList.status === 0" src="@/assets/common/fail.png" alt="" class="icon">
      <span class="status">{{ detailList.status === 2? '出货成功':'未支付' }}</span>
      <img v-if="detailList.status === 2" src="@/assets/common/successImg.png" alt="" class="pic">
      <img v-if="detailList.status === 0" src="@/assets/common/failImg.png" alt="" class="pic">
    </div>
    <el-form>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单编号：" label-width="120px">{{ detailList.orderNo }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品名称：" label-width="120px">{{ detailList.skuName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备编号：" label-width="120px">{{ detailList.innerCode }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单金额：" label-width="120px">{{ formatePrice(detailList.price) }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完成时间：" label-width="120px">{{ formateData(detailList.updateTime) }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：" label-width="120px">{{ formateData(detailList.createTime) }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备地址：" label-width="120px">{{ detailList.regionName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付方式：" label-width="120px">{{ formateStatus(detailList.payType) }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import dayjs from 'dayjs'
export default {
  props: {
    showDetaildialog: {
      type: Boolean,
      default: false
    },
    detailList: {
      type: Object,
      required: true
    }
  },
  computed: {
    formatePrice() {
      return (price) => {
        return (price / 100).toFixed(2)
      }
    },
    formateStatus() {
      return (status) => {
        if (status === 1) {
          return '支付宝支付'
        } else {
          return '微信支付'
        }
      }
    },
    formateData() {
      return (updateTime) => {
        console.log(updateTime)
        return dayjs(updateTime).format('YYYY.MM.DD HH:mm:ss')
      }
    }
  },
  methods: {
    btnCancel() {
      this.$parent.showDetaildialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.order-status{
  align-items: center;
  height: 54px;
  margin-bottom: 30px;
  background-color: hsla(0,0%,92.5%,.39);
  display: flex;
}
::v-deep .el-dialog {
    border-radius: 10px;
}
.icon{
  margin-left: 22px;
}
.status{
  flex: 1;
    margin-left: 16px;
    color: rgba(0,0,0,.85);
}
.pic{
  margin-right: 76px;
    margin-bottom: 7px;
}
::v-deep .el-form-item__content{
  height: 40px;
  line-height: 40px;
}

</style>
